{% extends 'layout.html' %}
{% load static %}
{% block css %}
    <link rel="stylesheet" href="{% static '/css/light_novel_main.css' %}">
    <link rel="stylesheet" href="{% static '/css/light_novel_main_lbt.css' %}">
{% endblock %}
{% block content %}
        <div class="carousel">
            <!-- 轮播图图片 -->
            <div class="carousel-inner" style="display: flex; overflow-x: hidden; scroll-snap-type: x mandatory;">
                <!-- 图片标签，注意添加了scroll-snap-points-x -->
                <img src="{% static '/picture/lbt1.jpg' %}" alt="Image 1" class="carousel-item" style="width: 100%; scroll-snap-align: start;" data-target="url1">
                <img src="{% static '/picture/lbt3.jpg' %}" alt="Image 2" class="carousel-item" style="width: 100%; scroll-snap-align: start;" data-target="url2">
                <img src="{% static '/picture/lbt1.jpg' %}" alt="Image 3" class="carousel-item" style="width: 100%; scroll-snap-align: start;" data-target="url3">
            </div>
            <!-- 轮播图指示器 -->
            <div class="carousel-indicators">
                <span class="carousel-indicator active"></span>
                <span class="carousel-indicator"></span>
                <span class="carousel-indicator"></span>
            </div>
            <!-- 轮播图控制按钮 -->
            <button class="carousel-control prev">&#10094;</button>
            <button class="carousel-control next">&#10095;</button>
        </div>
    <div class="article-categories">
        <h3>小说分类</h3>
        <div class="category-row">
            <ul>
                <li><a href="/novel/0/show/">奇幻</a></li>
                <li><a href="/novel/0/show/">科幻</a></li>
                <li><a href="/novel/0/show/">冒险</a></li>
                <li><a href="/novel/0/show/">校园</a></li>
                <li><a href="/novel/0/show/">恋爱</a></li>
            </ul>
        </div>
        <div class="category-row">
            <ul>
                <li><a href="/novel/0/show/">悬疑</a></li>
                <li><a href="/novel/0/show/">历史</a></li>
                <li><a href="/novel/0/show/">武侠</a></li>
                <li><a href="/novel/0/show/">game</a></li>
                <li><a href="/novel/0/show/">日常</a></li>
            </ul>
        </div>
    </div>

<div class="container">
    <div class="hot-container">
        <h2 class="hot-title">轻小说</h2>
        <!-- 模拟热搜排名项 -->
        {% for obj in queryset %}
        <div class="hot-item">
            <div class="hot-image-placeholder"><img src="{% static '/picture/qxszs.jpeg' %}"></div>
            <div class="hot-details">
                <a href="/novel/{{ obj.id}}/read/" class="hot-biaoti">{{ obj.title }}</a>
                <div class="hot-meta">
                    <span class="hot-date">发行日期:{{obj.release_time|date:"Y-m-d" }}</span>
                </div>
            </div>
            <div class="hot-popularity">
                <span class="flame-icon">🔥评分: {{ obj.score }}</span>
            </div>
        </div>
        <!-- 其他热搜项可以复制.hotsearch-item并修改内容 -->
        {% endfor %}

    </div>

    <div class="hotsearch-container">
        <h1 class="hotsearch-title">轻小说评分排名</h1>
        <!-- 模拟热搜排名项 -->
        {% for obj in hot_queryset %}
        <div class="hotsearch-item">
            <div class="hotsearch-details">
                <a href="/novel/{{ obj.id}}/read/" class="hotsearch-biaoti">{{ obj.title }}</a>
                <div class="hotsearch-meta">
                    <span class="hotsearch-rank">排名: {{ forloop.counter }}</span>
                    <span class="hotsearch-date">发行日期:{{obj.release_time|date:"Y-m-d" }}</span>
                </div>
            </div>
            <div class="hotsearch-popularity">
                <span class="flame-icon">🔥评分: {{ obj.score }}</span>
            </div>
        </div>
        <!-- 其他热搜项可以复制.hotsearch-item并修改内容 -->
        {% endfor %}

    </div>
</div>

<div class="author-rankings">
    <h2>热门作者排行榜</h2>
    <ol>
        <li><a href="/novel/0/show/">董智豪 - 资深二次元爱好者</a></li>
        <li><a href="/novel/0/show/">孟雅康 - 奇幻文学大师</a></li>
        <li><a href="/novel/0/show/">徐朝晖 - 科幻小说领军人物</a></li>
        <li><a href="/novel/0/show/">陈飞源 - 著名写手</a></li>
        <li><a href="/novel/0/show/">辛稼轩 - 著名写手</a></li>
        <li><a href="/novel/0/show/">吕名川 - 著名写手</a></li>
        <li><a href="/novel/0/show/">章炎 - 著名写手</a></li>
        <!-- 更多作者排名可以继续添加 -->
    </ol>
</div>
{% endblock %}
{% block js%}
    <script type="text/javascript" src="{% static '/js/lbt.js' %}"></script>
{% endblock %}